<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <style>
        .red-bg{background-color: red}
        .green-bg{background-color: green}
    </style>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
<table border="1px" v-bind:width="width">
    <tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
    <tr v-for="per in persons" v-bind:class="per.gender=='男' ? 'red-bg':'green-bg'" v-on:click="showPerson(per)">
        <td>{{per.name}}</td>
        <td>{{per.age}}</td>
        <td>{{per.gender}}</td>
    </tr>
</table>


</div>
<script src="js/vue.min.js"></script>
<script>
    new Vue(
        //创建Vue对象 el属性 显示文字所在页面标签 data属性（模型）需要进行绑定数据
        {
            el: '#app',
            data: {
                message: 'Hello Vue!',
                width: '600px',
                persons: [
                {name:"张三",age:20,gender:"男"},
                {name:"李四",age:23,gender:"女"},
                {name:"王五",age:24,gender:"男"},
                {name:"赵六",age:25,gender:"女"}
            ]
            },
            methods: {
                showPerson(per) {
                    alert("姓名:"+per.name+",年龄："+per.age+",性别:"+per.gender);
                }
            },
            created() {
                console.log("created");
            },
            mounted() {
                console.log("mounted");
            },
            updated() {
                console.log("updated");
            },
            unmounted() {
                console.log("unmounted");
            }

        })
</script>
</body>
</html>